// webpack基本配置，最下面有每个插件的下载
const path = require("path");

// 该插件将自动生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
const htmlWebpackPlugin = require("html-webpack-plugin");

// 抽离CSS
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 优化以及检查压缩css
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
// new webpack.ProvidePlugin({
// "React": "react",
// })

module.exports = {
  // 开发者模式还是生产模式
  mode: "development", // 开发模式development 生产production,
  //   入口
  entry: "./src/main.jsx", // 入口文件
  // 配置打包的出口
  output: {
    // 必须是绝对路径
    path: path.resolve(__dirname, "dist"), //打包后文件的输出位置
    // filename: "main.js", // 打包后的文件名
    filename: "[name].bundle.js", // 打包后的文件名
    clean: true, // 打包之前清理dist文件夹
    publicPath: "/",
  },
  resolve: {
    extensions: [".jsx", ".js", ".json"], // 自动补全文件扩展名，让jsx可以使用
  },
  //插件
  plugins: [
    // 抽离以及压缩css
    new htmlWebpackPlugin({
      template: "./public/index.html", // 生成HTML文件的模板文件
      filename: "index.html", // 生成的HTML文件名
      // title:'',//配置html的title
      inject: "body", // <script>标签插入的地方
    }),
    new MiniCssExtractPlugin({
      filename: "./styles/[contenthash].css",
    }),
  ],
  optimization: {
    minimizer: [new CssMinimizerWebpackPlugin()], //必须是数组不然打包报错
  },
  module: {
    rules: [
      // 静态资源打包（图片）
      {
        test: /\.png$/,
        type: "asset/resource",
        generator: {
          filename: "images/[contenthash][ext]",
        },
      },
      //   处理css以及less等预处理样式
      {
        test: /\.(css|less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          ,
          // "style-loader",
          {
            loader: "css-loader",
            options: {
              //取消模块化加载css，不取消修改不了antd的样式
              modules: false,
            },
          },
          {
            loader: "less-loader",
          },
        ],
        //项目中存在各种各样的样式文件，我们可以通过loader来加载
      },
      // 打包es6转es5,兼容低版本浏览器
      // 该包中含有 regeneratorRuntime
      // npm install --save @babel/runtime
      // 该插件会在需要regeneratorRuntime的地方自动require导入
      // npm install --save-dev @babel/plugin-transform-runtime
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            // @babel/preset-react react兼容低版本浏览器配置，jsx转es5
            // npm install -D @babel/preset-react
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: [
              // 主要改变在此处
              ["@babel/plugin-transform-runtime"],
            ],
          },
        },
      },
    ],
  },
  //   模块热更新
  devServer: {
    hot: true, //打开热跟新
    static: "./dist",
  },
};

// 打包命令 npx webpack --config webpack.config.js
// npx webpack --config webpack.config.js 可以简写为 npx webpack，因为当存在

// 模块热更新
// npm install -D webpack-dev-server
// "start": "webpack-dev-server --open-app-name chrome"

// 安装webpack
// npm install webpack webpack-cli -D
// webpack配置项说明

// 入口（entry）入口文件
// entry: './path/to/my/entry/file.js',

// 输出（output）打包文件输出口
// output: {
//     // bundle生成位置
//     path: path.resolve(__dirname, 'dist'),
//     // bundle文件名
//     filename: 'my-first-webpack.bundle.js',
//   },

// loader
// 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
// loader主要用于转换源代码，可以使你在import 或 "load(加载)" 模块时预处理文件。通常有两个属性：
// test 属性，识别出哪些文件会被转换。
// use 属性，定义出在进行转换时，应该使用哪个 loader
// module.rules 允许你在 webpack 配置中指定多个 loader。
// module: {
//     rules: [
//       {
//         test: /.css$/,
//         use: [
//           // [style-loader](/loaders/style-loader)
//           { loader: 'style-loader' },
//           // [css-loader](/loaders/css-loader)
//           {
//             loader: 'css-loader',
//             options: {
//               modules: true
//             }
//           },
//           // [sass-loader](/loaders/sass-loader)
//           { loader: 'sass-loader' }
//         ]
//       }
//     ]
//   }

// 插件（plugin）
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const webpack = require('webpack'); // 访问内置的插件
// const path = require('path');
// module.exports = {
//   entry: './path/to/my/entry/file.js',
//   output: {
//     filename: 'my-first-webpack.bundle.js',
//     path: path.resolve(__dirname, 'dist'),
//   },
//   module: {
//     rules: [
//       {
//         test: /.(js|jsx)$/,
//         use: 'babel-loader',
//       },
//     ],
//   },
//   plugins: [
//     new webpack.ProgressPlugin(),
//     new HtmlWebpackPlugin({ template: './src/index.html' }),
//   ],
// };

// 模式（mode）：主要有开发模式（development）和生产模式（production）

// 生成html文件
// npm install -D html-webpack-plugin

// 加载css,less文件配置
// npm install -D style-loader css-loader less-loader less

// 抽离和压缩CSS
// npm install -D mini-css-extract-plugin

// CssMinimizerWebpackPlugin:这个插件使用cssnano优化和压缩CSS
// npm install -D css-minimizer-webpack-plugin

// 支持 ES6 语法（babel-loader）
// npm install -D babel-loader @babel/core @babel/preset-env

// 兼容async/await语法
// 该包中含有 regeneratorRuntime
// npm install --save @babel/runtime
// 该插件会在需要regeneratorRuntime的地方自动require导入
// npm install --save-dev @babel/plugin-transform-runtime
